<template>
  <el-card>
    <div slot="header">
      <span>端口列表</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="isShow = true">添加</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="port" label="开放端口" show-overflow-tooltip min-width="110" />
      <el-table-column prop="product" label="开放端口" show-overflow-tooltip min-width="110" />
      <el-table-column prop="version" label="应用版本" show-overflow-tooltip min-width="110" />
      <el-table-column prop="port_info" label="组件简介" show-overflow-tooltip min-width="110" />
      <el-table-column
        prop="create_time"
        label="创建时间"
        show-overflow-tooltip
        min-width="135"
      >
        <template slot-scope="{ row }">{{
          row.create_time | toDateString
        }}</template>
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="更新时间"
        show-overflow-tooltip
        min-width="135"
      >
        <template slot-scope="{ row }">{{
          row.update_time | toDateString
        }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="160"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-link
            icon="el-icon-edit"
            type="primary"
            :underline="false"
            @click="edit(scope.row)"
          >配置</el-link>

          <el-popconfirm
            title="您确定删除吗？"
            @confirm="del(scope.row.id)"
          >
            <el-link
              slot="reference"
              icon="el-icon-delete"
              type="primary"
              :underline="false"
            >删除</el-link>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="editForm.id ? '更新端口信息' : '添加端口'"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="600px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @closed="editForm = {}"
    >
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editRules"
        label-width="100px"
        @submit.native.prevent
      >
        <el-form-item label="开放端口:" prop="port">
          <el-input-number v-model="editForm.port" controls-position="right" :min="1" :max="65535" style="width:100%" />
        </el-form-item>
        <!-- <el-form-item label="端口类型:" prop="protocol">
          <el-input
            v-model="editForm.protocol"
            placeholder="请输入端口类型"
            clearable
          />
        </el-form-item>
        <el-form-item label="服务名称:" prop="name">
          <el-input
            v-model="editForm.name"
            placeholder="请输入服务名称"
            clearable
          />
        </el-form-item> -->
        <el-form-item label="产品信息:" prop="product">
          <el-input
            v-model="editForm.product"
            placeholder="请输入产品信息"
            clearable
          />
        </el-form-item>
        <el-form-item label="应用版本:" prop="version">
          <el-input
            v-model="editForm.version"
            placeholder="请输入应用版本"
            clearable
          />
        </el-form-item>
        <el-form-item label="端口信息:">
          <el-input
            v-model="editForm.port_info"
            placeholder="请输入端口信息"
            :rows="4"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button
          type="primary"
          :loading="editLoading"
          @click="save()"
        >保存</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'PortTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    assetId: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      isShow: false,
      editForm: {},
      editRules: {
        port: [
          { required: true, message: '请输入开放端口', trigger: 'blur' }
        ]
      },
      editLoading: false
    }
  },
  computed: {
    total() {
      return this.tableData.length
    }
  },
  methods: {
    /* 删除组件 */
    del(id) {
      this.$http.get(`/asset/port/delete/${id}/`).then(res => {
        if (res.data.code === 0) {
          this.$message({ type: 'success', message: res.data.msg })
          this.reload()
        }
      })
    },
    /* 重置表格 */
    reload() {
      this.$emit('reload')
    },
    /* 提交表单 */
    save() {
      this.editLoading = true
      const url = this.editForm.id ? `/asset/port/update/${this.editForm.id}/` : `/asset/port/create/${this.assetId}/`
      this.$http.post(url, this.editForm).then(res => {
        this.editLoading = false
        if (res.data.code === 0) {
          this.$message({ type: 'success', message: res.data.msg })
          this.isShow = false
          this.reload()
        } else {
          this.$message({ type: 'error', message: res.data.msg })
        }
      }).catch(() => {
        this.editLoading = false
        this.isShow = false
      })
    },
    /* 编辑表单 */
    edit(row) {
      const formData = {
        id: row.id,
        name: row.name,
        version: row.version,
        port_info: row.port_info
      }
      this.editForm = Object.assign(formData, {})
      this.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
